@charset "UTF-8";

$simditor-toolbar-height: 40px;

.simditor {
	position: relative;
	border: 1px solid #c9d8db;

	.simditor-wrapper {
		position: relative;
		background: #ffffff;
		overflow: hidden;

		.simditor-placeholder {
			display: none;
			position: absolute;
			top: $simditor-toolbar-height;
			left: 0;
			z-index: 0;
			padding: 22px 15px;
			font-size: 16px;
			font-family: helvetica,Arial;
			line-height: 1.5;
			color: #999999;
			background: transparent;
		}

		&.toolbar-floating {
			padding-top: $simditor-toolbar-height;

			.simditor-toolbar {
				position: fixed;
				top: 0;
				z-index: 10;
				box-shadow: 0 0 6px rgba(0,0,0,0.1);
			}
		}
	}

	.simditor-body {
		padding: 22px 15px 40px;
		min-height: 300px;
		outline: none;
		cursor: text;
		position: relative;
		z-index: 1;
		background: transparent;

		a.selected {
			background: #b3d4fd;
		}

		a.simditor-mention {
			cursor: pointer;
		}

		.simditor-image {
			margin: 15px 0;
			cursor: pointer;
			outline: none;
			position: relative;

			&.selected {
				background: none;
				box-shadow: 0 0 0 4px rgba(0,0,0,0.2);
			}

			img {
				margin: 0;
			}

			.mask {
				position: absolute;
				background: rgba(0,0,0,0.4);
				width: 100%;
				height: 100%;
				top: 0;
			}

			.simditor-image-progress {
				width: 30px;
				height: 30px;
				background: #ffffff;
				border-radius: 30px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -15px 0 0 -15px;
				color: #333333;
				font-size: 14px;
				line-height: 30px;
				text-align: center;
				box-shadow: 0 0 8px rgba(0,0,0,0.4);

				&.loading {
					background: #ffffff url(../images/loading-upload.gif) no-repeat center center;
					span {
						display: none;
					}
				}
			}

			.simditor-image-resize-handle {
				display: none;
			}
		}

		.simditor-table {
			position: relative;

			&.resizing {
				cursor: col-resize;
			}

			.simditor-resize-handle {
				position: absolute;
				left: 0;
				top: 0;
				width: 10px;
				height: 100%;
				cursor: col-resize;
			}
		}

		pre {
			min-height: 28px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
		}

	}

	.simditor-paste-area {
		background: transparent;
		border: none;
		outline: none;
	}

	.simditor-toolbar {
		border-bottom: 1px solid #eeeeee;
		background: #ffffff;
		width: 100%;

		& > ul {
			height: $simditor-toolbar-height;
			margin: 0;
			padding: 0 0 0 6px;
			list-style: none;

			& > li {
				position: relative;
				float: left;

				& > span.separator {
					display: block;
					float: left;
					background: #cfcfcf;
					width: 1px;
					height: 18px;
					margin: ($simditor-toolbar-height - 18px) / 2 15px;
				}

				& > .toolbar-item {
					display: block;
					float: left;
					width: 50px;
					height: $simditor-toolbar-height;
					outline: none;
					overflow: hidden;
					color: #333333;
					font-size: 15px;
					line-height: $simditor-toolbar-height;
					text-align: center;
					text-decoration: none;

					span {
						opacity: 0.6;
					}

					&:hover span {
						opacity: 1;
					}

					&.active {
						background: #eeeeee;

						span {
							opacity: 1;
						}
					}

					&.disabled {
						cursor: default;

						span {
							opacity: 0.3;
						}
					}

					&.toolbar-item-title {
						span:before {
							content: "T";
							font-size: 19px;
							font-weight: bold;
							font-family: 'Times New Roman';
						}

						&.active-h1 span:before {
							content: 'H1';
							font-size: 18px;
						}

						&.active-h2 span:before {
							content: 'H2';
							font-size: 18px;
						}

						&.active-h3 span:before {
							content: 'H3';
							font-size: 18px;
						}
					}
				}

				&.menu-on {
					.toolbar-item {
						position: relative;
						z-index: 21;
						background: #ffffff;
						box-shadow: 0 -3px 3px rgba(0,0,0,0.2);
					}

					.toolbar-menu {
						display: block;
					}
				}
			}
		}

		.toolbar-menu {
			display: none;
			position: absolute;
			top: $simditor-toolbar-height - 1px;
			left: 0;
			z-index: 20;
			background: #ffffff;
			text-align: left;
			box-shadow: 0 0 3px rgba(0,0,0,0.2);

			ul {
				min-width: 160px;
				list-style: none;
				margin: 0;
				padding: 10px 1px;

				& > li {

					.menu-item {
						display: block;
						font-size:16px;
						line-height: 2em;
						padding: 0 10px;
						text-decoration: none;
						color: #666666;

						&:hover {
							background: #f6f6f6;
						}

						&.menu-item-h1 {
							font-size: 24px;
							color: #333333;
						}

						&.menu-item-h2 {
							font-size: 22px;
							color: #333333;
						}

						&.menu-item-h3 {
							font-size: 20px;
							color: #333333;
						}
					}

					.separator {
						display: block;
						border-top: 1px solid #cccccc;
						height: 0;
						line-height: 0;
						font-size: 0;
						margin: 6px 0;
					}
				}

			}

			&.toolbar-menu-table {
				.menu-create-table {
					background: #ffffff;

					table {
						border: none;
						border-collapse: collapse;
						border-spacing: 0;
						table-layout: fixed;

						td {
							height: 16px;
							padding: 0;
							border: 2px solid #ffffff;
							background: #f3f3f3;
							cursor: pointer;

							&:before {
								width: 16px;
								display: block;
								content: ''
							}

							&.selected {
								background: #cfcfcf;
							}
						}
					}
				}

				.menu-edit-table {
					display: none;
				}
			}

			&.toolbar-menu-image {
				.menu-item-upload-image {
					position: relative;
					overflow: hidden;

					input[type=file] {
						position: absolute;
						right: 0px;
						top: 0px;
						opacity: 0;
						font-size: 100px;
						cursor: pointer;
					}
				}
			}
		}
	}

	.simditor-popover {
		display: none;
		padding: 5px 8px 0;
		background: #ffffff;
		box-shadow: 0 1px 4px rgba(0,0,0,0.4);
		border-radius: 2px;
		position: absolute;
		z-index: 2;

		.settings-field {
			margin: 0 0 5px 0;
			font-size: 12px;

			label {
				margin: 0 2px 0 0;
			}

			input[type=text] {
				width: 200px;
				box-sizing: border-box;
				font-size: 12px;
			}
		}

		&.link-popover .btn-unlink,
		&.image-popover .btn-upload {
			margin: 0 0 0 5px;
			color: #333333;
			font-size: 14px;

			span {
				opacity: 0.6;
			}

			&:hover span {
				opacity: 1;
			}
		}

		&.image-popover .btn-upload {
			position: relative;
			display: inline-block;
			overflow: hidden;

			input[type=file] {
				position: absolute;
				right: 0px;
				top: 0px;
				opacity: 0;
				height: 100%;
				width: 28px;
			}
		}
	}
}

.simditor .simditor-body, .editor-style {
	font-size: 16px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.6;
	color: #333;
	outline: none;
	word-wrap: break-word;

	& > :first-child {
		margin-top: 0!important;
	}

	a{ color: #4298BA; text-decoration: none; word-break: break-all;}
	a:visited{ color: #4298BA; }
	a:hover{ color: #0F769F; }
	a:active{ color:#9E792E; }
	a:hover, a:active{ outline: 0; }

	h1,h2,h3,h4,h5,h6 {
		font-weight: bold;
		margin: 40px 0 20px;
		color: #000000;
	}

	h1 { font-size: 24px; }
	h2 { font-size: 22px; }
	h3 { font-size: 20px; }
	h4 { font-size: 18px; }
	h5 { font-size: 16px; }
	h6 { font-size: 16px; }

	p, div {
		word-wrap: break-word;
		margin: 0 0 15px 0;
		color: #333;
		word-wrap: break-word;
	}

	b, strong {
		font-weight: bold;
	}

	i, em {
		font-style: italic;
	}

	u {
		text-decoration: underline;
	}

	strike, del {
		text-decoration: line-through;
	}

	ul, ol {
		list-style:disc outside none;
		margin: 15px 0;
		padding: 0 0 0 40px;
		line-height: 1.6;

		ul, ol {
			padding-left: 30px;
		}

		ul {
			list-style: circle outside none;

			ul {
				list-style: square outside none;
			}
		}
	}

	ol {
		list-style:decimal;
	}

	blockquote {
		border-left: 6px solid #ddd;
		padding: 5px 0 5px 10px;
		margin: 15px 0 15px 15px;

		& > :first-child {
			margin-top: 0;
		}
	}

	pre {
		padding: 10px 5px 10px 10px;
		margin: 15px 0;
		display: block;
		line-height: 18px;
		background: #F0F0F0;
		border-radius: 3px;
		font-size:13px;
		font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace;
		overflow-x: auto;
		white-space: pre;
		word-wrap: normal;
	}

	code {
		display: inline-block;
		padding: 0 4px;
		margin: 0 5px;
		background: #eeeeee;
		border-radius: 3px;
		font-size:13px;
		font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace;
	}

	hr {
		display: block;
		height: 0px;
		border: 0;
		border-top: 1px solid #ccc;
		margin: 15px 0;
		padding: 0;
	}

	table {
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		border-spacing: 0;
		margin: 15px 0;

		thead {
			background-color: #f9f9f9;
		}

		td {
			min-width: 40px;
			height: 30px;
			border: 1px solid #ccc;
			vertical-align: top;
			padding: 2px 4px;
			box-sizing: border-box;

			&.active {
				background-color: #ffffee;
			}
		}
	}


	img {
		max-width: 800px;
		margin: 20px 0;
		display: block;
		-ms-interpolation-mode: bicubic;
		vertical-align: bottom;
		box-shadow: 0 1px 6px rgba(0,0,0,0.3);
	}

	@for $i from 0 through 10 {
		*[data-indent="#{$i}"] {
			margin-left: 40px * $i;
		}
	}
}
